import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  FlatList
} from 'react-native';

function App(): React.JSX.Element {
  const [loaded, setLoaded] = useState(false)
  const [movie, setMovie] = useState([])
  const fetchData = () => {
    const REQUEST_URL =
      "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";
    fetch(REQUEST_URL)
      .then(response => response.json())
      .then(responseData => {
        console.log('======', responseData?.movies);

        setMovie(responseData?.movies)
        setLoaded(false)
      });
  }
  useEffect(() => {
    setLoaded(true)
    fetchData()
  }, [])


  const renderLoadingView = () => {
    return <View style={styles.moveContainer}>
      <Text>Loading movies...</Text>
    </View>
  }

  const renderMovie = ({ item }: { item: any }) => {
    return (
      <View style={styles.moveContainer}>
        <Image
          source={{ uri: "https://img.alicdn.com/imgextra/i1/O1CN01CC9kic1ig1r4sAY5d_!!6000000004441-2-tps-880-210.pnghttps://img.alicdn.com/imgextra/i2/O1CN01g4z4yk1LLCfrHpNqA_!!6000000001282-2-tps-54-54.png" }}
          style={styles.icon}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>文字标题{item?.id}</Text>
          <Text style={styles.year}>{item?.year}</Text>
        </View>
      </View>
    );
  }

  return (
    <View>
      {
        loaded ? renderLoadingView() : <FlatList
          data={movie}
          renderItem={renderMovie}
          style={styles.list}
          keyExtractor={item => item.id}
        />
      }
    </View>
  );
}

const styles = StyleSheet.create({
  moveContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    paddingLeft: 20,
  },
  rightContainer: {
    flex: 1
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: "center"
  },
  year: {
    textAlign: "center"
  },
  icon: {
    width: 30,
    height: 30,
    padding: 10,
  },
  list: {
    paddingTop: 20,
    backgroundColor: "#F5FCFF"
  }
});

export default App;
